<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Blog</title>
    <style>
        .box{
            width: 600px;
            height: 400px;
            border:1px solid #666666;
            background-color: lightgoldenrodyellow;
            margin: 10px auto;
        }
        h1{
            text-align: center;
        }
        ul {
            list-style: none
        }
        textarea {
            width: 595px;
            height: 260px;

        }
        ul {
            margin-top: 30px;
            width: 450px;
            padding-left: 80px;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }
        ul li a {
            float: right;
        }
    </style>
    <script src="js/jquery.min.js">
    </script>
    <script>
      $(function () {
            $('.btn').click(function () {
                let li=$('<li></li>');
                li.html($(".txt").val()+"<a href='javascript:;'>删除</a>");
                $("ul").prepend(li);
                li.slideDown();
                $('.txt').val('')
            })

             // $('ul a').click(function () {
             //      alert("hi")
             // })

             $('ul').on('click','a',function () {
                   $(this).parent().slideUp(function () {
                       $(this).remove();
                   })
             })
      })
    </script>
</head>

<body>
<div class="box" id="weibo">
   <h1>发布心情，展示生活</h1>
    <textarea name="" class="txt" cols="26" rows="10"></textarea>
    <br>
    <button class="btn">发布</button>
    <ul>
    </ul>
</div>
</body>
</html>